<template>
	<view class="container">
		<view class="business_top">
			<view class="account" :style="{color: type === 'account1' ? '#00ff94' : 'white'}"
				@click="changeType('account1')">
				待确认账单</view>
			<view class="xian"></view>
			<view class="account" :style="{color: type === 'account2' ? '#00ff94' : 'white'}"
				@click="changeType('account2')">
				已确认账单</view>
		</view>

		<!--待确认账单 -->
		<view class="business_a" v-if="type === 'account1'" v-for="(item,index) in unconfirmed" :key="index">
			<view class="accountdata">
				<view class="account_top">
					<view class="acc_left">
						{{item.currDate}}月账单
					</view>
					<!-- <view class="acc_right">
						账单详情 >
					</view> -->
				</view>
				<view class="acc_table">
					<view class="setmeal" v-for="(value, key) in Object.entries(item.packageMap)" :key="key">
						<view class="acc1">
							所有门店 {{value[0]}} 总购买人数
						</view>
						<view class="acc2">
							{{getPackageValue(value,item,index)}}
						</view>
					</view>
					<view class="setmeal btm">
						<view class="acc1">
							会员费共计（元）
						</view>
						<view class="acc2">
							{{item.originalIncome}}
						</view>
					</view>
				</view>
				<view class="account_bottom">
					<view class="acc_left">
						分成收益共计（元）
					</view>
					<view class="acc_right">
						{{item.totalIncome}}
					</view>
				</view>
			</view>
			<button class="accountbtn" @click="confirmUnBillList(item.id)">确认账单</button>
		</view>
		<!--已确认账单 -->
		<view class="business_b" v-if="type ==='account2'" v-for="(item,index) in confirm" :key="index">
			<view class="accountdata">
				<view class="account_top">
					<view class="acc_left">
						{{item.currDate}}账单
					</view>
					<!-- <view class="acc_right">
						账单详情 >
					</view> -->
					<view class="queren">
						已确认
					</view>
				</view>
				<view class="acc_table">
					<view class="setmeal" v-for="(value, key) in Object.entries(item.packageMap)" :key="key">
						<view class="acc1">
							所有门店 {{value[0]}} 总购买人数
						</view>
						<view class="acc2">
							{{getConfirm(value,item,index)}}
						</view>
					</view>
					<view class="setmeal btm">
						<view class="acc1">
							会员费共计（元）
						</view>
						<view class="acc2">
							{{item.originalIncome}}
						</view>
					</view>
				</view>
				<view class="account_bottom">
					<view class="acc_left">
						分成收益共计（元）
					</view>
					<view class="acc_right">
						{{item.totalIncome}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		duizhang
	} from "@/common/mixins/duizhang/index.js";
	export default {
		mixins: [duizhang],
		data() {
			return {
				type: 'account1',
				// 未确认
				unconfirmed: [],
				// 已确认
				confirm: [],
				ids: ''
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url('../../../common/sass/all/all.scss');

	.business_a {
		margin-bottom: 80rpx;
	}

	.business_top {
		width: 670rpx;
		display: flex;
		flex-direction: row;
		margin-top: 40rpx;
		margin-bottom: 40rpx;

		.account {
			color: #00FF95;
		}

		.xian {
			position: relative;
			width: 1rpx;
			height: 30rpx;
			background-color: #89c8ce;
			margin-top: 10rpx;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}
	}

	.accountdata {
		width: 670rpx;
		height: 400rpx;
		background-color: #ffffff;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.account_top {
			width: 585rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 30rpx;
			
			.acc_left {
				font-size: 29rpx;
				font-weight: 500;
				color: #00818B;
			}

			.acc_right {
				font-size: 24rpx;
				font-weight: 400;
				color: #00818B;
				line-height: 51rpx;
			}
			
			.queren{
				color: #00818B;
			}
		}

		.account_bottom {
			width: 585rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 15rpx;

			.acc_left {
				font-size: 29rpx;
				font-weight: 500;
				color: #00818B;
			}

			.acc_right {
				font-size: 24rpx;
				font-weight: 400;
				color: #00818B;
				line-height: 45rpx;
			}
		}


		.acc_table {
			overflow-y: scroll;
			height: 236rpx;
			margin-top: 10rpx;
			width: 585rpx;

			.btm {
				border-bottom: 1rpx solid #d8d8d8;
			}

			.setmeal {
				height: 59rpx;
				line-height: 59rpx;
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #d8d8d8;


				.acc1 {
					font-size: 24rpx;
					font-weight: 400;
					color: #4C4948;
				}

				.acc2 {
					font-size: 24rpx;
					font-weight: 400;
					color: #4C4948;
				}
			}
		}
	}

	.accountbtn {
		border-radius: 20rpx;
		box-shadow: 5rpx 8rpx 6rpx #095c62;
		width: 670rpx;
		height: 91rpx;
		line-height: 91rpx;
		letter-spacing: 5rpx;
		margin-top: 52rpx;
		font-size: 33rpx;
		font-weight: 400;
		color: #FFFFFF;
		background: linear-gradient(to right, rgba(19, 182, 162, 1), rgba(1, 125, 135, 1));
	}

	.active {
		color: #00ff94;
	}
	
	.business_b{
		margin-top: 20rpx;
	}
</style>